<template>
  <div class="">
    <div style="height: 800px;border: 1px solid #eee;">
      <vue3-tree-org v-if="state.treeOrgData" :data="state.treeOrgData" :props="{}" :toolBar="{ zoom: false}" center :lazy="false" :scalable="false" collapsable draggable draggable-on-node :node-draggable="false"
                     :clone-draggable="false" :horizontal="true">
        <template v-slot="{ node }">
          <div class="tree-org-node__text node-label">
            <template v-if="node.$$data.id === 'top'">
              <div style="display: flex;">
                <el-Image style="width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;" :needBaseUrl="false" :src="detail.headimgUrl" />
                <div style="text-align: left; white-space: nowrap;">
                  <div>{{ detail.nickName }}</div>
                  <div>ID：{{ detail.id }}</div>
                </div>
              </div>
              <!--<div style="background-color: #333333; width: 80%; height: 1px; margin: 10px auto;"></div>-->
              <div style="text-align: left;margin-top: 10px">
                <div><el-text type="info">等级：</el-text>{{detail.gradeName}}</div>
                <div><el-text type="info">分组：</el-text>{{detail.groupName}}</div>
                <div><el-text type="info">佣金余额：</el-text><el-text v-if="detail.commissionBalance">￥{{detail.commissionBalance}}</el-text></div>
                <div><el-text type="info">佣金总收入：</el-text><el-text v-if="detail.commissionFull">￥{{detail.commissionFull}}</el-text></div>
                <div><el-text type="info">总消费金额：</el-text><el-text v-if="detail.consumptionAmount">￥{{detail.consumptionAmount}}</el-text></div>
              </div>
            </template>
            <template v-else>
              <div style="display: flex;">
                <el-Image style="width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;" :needBaseUrl="false" :src="node.$$data.headimgUrl" />
                <div style="text-align: left; white-space: nowrap;">
                  <div>{{ node.$$data.nickName }}</div>
                  <div>ID：{{ node.$$data.id }}</div>
                </div>
              </div>
              <!--            <div style="background-color: #333333; width: 80%; height: 1px; margin: 10px auto;"></div>-->
              <div style="text-align: left;margin-top: 10px">
                <div><el-text type="info">等级：</el-text>{{node.$$data.gradeName}}</div>
                <div><el-text type="info">分组：</el-text>{{node.$$data.groupName}}</div>
                <div><el-text type="info">佣金余额：</el-text><el-text v-if="node.$$data.commissionBalance">￥{{node.$$data.commissionBalance}}</el-text></div>
                <div><el-text type="info">佣金总收入：</el-text><el-text v-if="node.$$data.commissionFull">￥{{node.$$data.commissionFull}}</el-text></div>
                <div><el-text type="info">总消费金额：</el-text><el-text v-if="node.$$data.consumptionAmount">￥{{node.$$data.consumptionAmount}}</el-text></div>
              </div>
            </template>

          </div>
        </template>
      </vue3-tree-org>
    </div>

  </div>
</template>

<script setup>
import {
  getCurrentInstance,
  ref,
  reactive,
  onMounted,
  watch,
  computed
} from "vue"
import {Vue3TreeOrg} from "vue3-tree-org";
const {
  proxy
} = getCurrentInstance()
const props = defineProps({
  sid: {
    type: String,
    default: "",
  },
  detail: {
    type: Object,
    default: {},
  },
})
const sid = computed(() => props.sid)
const loading = ref(false)
const state = reactive({
  treeOrgData: null,
  showEditIntegral: false,
  showEditGrade: false,
});

onMounted(() => {
  getData()
})

const formatData = (arr) => {
  arr.forEach(item => {
    if(item.children && item.children.length > 0){
      item.children = formatData(item.children);
      item.isLeaf = false
      item.expand = true;
    }else{
      item.isLeaf = true
      item.expand = false
    }
  })
  return arr;
}
const getData = async () =>{
  loading.value = true
  await proxy.$axios
      .get(`/distributor/getDistributorLower/${sid.value}`)
      .then((res) => {
        if (res.data.code == 200) {
          let result = res.data.data;
          result = formatData(result)
          state.treeOrgData = {
            nickName:'',
            headimgUrl:'',
            isLeaf:false,
            id: "top",
            children:result,
            expand:true
          };
        } else {
          proxy.$message({message: res.data.msg, type: "error"})
        }
      }).catch((err) => {

      }).finally(()=>{
        loading.value = false
      })
}
</script>

<style lang="less">


</style>